Digamos que tengo un componente:
<script lang="ts"> const players: Player[] = getPlayersFromSomewhere() </script> {#each players || [] as player} <Player {player} /> {/each} <script lang="ts"> export let player: Player; async function doSomethingWithPlayer() { // many lines of code here... } async function doSomethingElse() { // many lines of code here... } async function doSomethingElseAgain() { // many lines of code here... } // ... many functions here </script> player is used here with many buttons like: <button on:click={doSomethingWithPlayer}>...</button> <button on:click={doSomethingElse}>...</button> <button on:click={doSomethingElseAgain}>...</button> ¿Svelte está recreando las funciones en Player.svelte para cada jugador o solo las está usando una vez para cada jugador?
¿Debo crear las funciones en Page.svelte y pasarlas a Player.svelte ? ¿O es Svelte capaz de "izarlos"?
Svelte levantará automáticamente las funciones que no dependen del estado del componente local. De los documentos :
No se preocupe por el hecho de que estamos volviendo a declarar la función foo para cada instancia de componente: Svelte extraerá cualquier función que no dependa del estado local de la definición del componente.
Puede ver este comportamiento en Svelte REPL. Considere el siguiente componente.
<script> let name = 'world'; function changeName() { name = name + 1; } function log() { console.log("I'm independent") } </script> <h1>Hello {name}!</h1> <button on:click={changeName}> Change </button> <button on:click={log}> Log </button> changeName depende del estado del componente, pero log no, por lo que se extrae del componente. Verá lo siguiente en el JS compilado: solo hay una función de log , pero changeName se crea por instancia.
function log() { console.log("I'm independent"); } function instance($$self, $$props, $$invalidate) { let name = 'world'; function changeName() { $$invalidate(0, name = name + 1); } return [name, changeName]; } class App extends SvelteComponent { constructor(options) { super(); init(this, options, instance, create_fragment, safe_not_equal, {}); } }Puede usar el contexto del módulo para ejecutar el código solo una vez, independientemente de cuántas veces inicialice el componente. Le recomiendo que mire esta respuesta de Rich Harris y el tutorial de contexto del módulo oficial.